<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">
					<view class="flex-center">
						<view v-for="(item, index) in tabs" :key="index"
							:class="['tab-item u-f-44 u-lh-60', index > 0 ? 'u-m-l-54' : '']" @click="tabIndex = index">
							<view :class="[tabIndex === index ? 'font-medio' : 'color-grew']">
								{{ lang_common[item.key] }}
							</view>
							<view v-if="tabIndex === index" class="tab-item-line"></view>
						</view>
					</view>
				</view>
				<view></view>
			</view>
		</view>

		<!-- 评论类型 -->
		<view class="comment-type-container">
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>

			<view class="flex-center-between u-text-center" style="padding: 20rpx 30rpx;">
				<view v-for="(item, index) in commentTypes" :key="index"
					:class="['comment-type u-f-24 u-lh-48', commentTypeIndex === index ? 'comment-type-active' : 'color-grew']"
					@click="commentTypeIndex = index">
					{{ item.label }}
				</view>
			</view>
		</view>

		<!-- 分割线 -->
		<u-gap height="5" bgColor="#F9F9F9"></u-gap>
		<!-- 列表 -->
		<swiper style="height: calc(100vh - 190rpx - var(--status-bar-height));" :current="tabIndex"
			@change="tabIndex = $event.detail.current">
			<swiper-item v-for="(item, index) in tabs" :key="index">
				<comment-list ref="mescrollItem" :i="index" :index="tabIndex" :merchant-id="merchantId"
					:comment-type-index="commentTypeIndex"></comment-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		commentMerchantPage
	} from '@/api/user/comment.js'
	import CommentList from './components/comment-list.vue'
	export default {
		components: { CommentList },
		data() {
			// 初始化顶部导航栏
			let tabs = ['chosen', 'all'].map((item, index) => {
				let result = {
					key: item,
					value: index
				}
				return result
			})

			// 
			return {
				tabs,
				tabIndex: 0,

				commentTypes: [],
				commentTypeIndex: 0,

				merchantId: '',
				dataList: []
			}
		},
		onLoad({
			merchantId
		}) {
			this.merchantId = merchantId
			let {
				last_comment,
				bad_comment,
				img_comment
			} = this.lang_comerciante
			// 初始化评论类型
			let commentTypes = [this.lang_common.all, last_comment, bad_comment, img_comment].map((item, index) => {
				let result = {
					label: item,
					key: index
				}
				return result
			})

			this.commentTypes = commentTypes
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.tab-item {
		position: relative;
		top: 0;
		left: 0;

		&-line {
			position: absolute;
			bottom: -10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 42rpx;
			height: 7rpx;
			background: linear-gradient(to right, #F94404 0%, #FD164F 100%);
			box-shadow: 0 4rpx 8rpx 0 #FD164F;
			border-radius: 22rpx;
		}
	}

	.comment-type {
		width: 148rpx;
		height: 48rpx;
		border: 2rpx solid #F9F9F9;
		background-color: #F9F9F9;
		border-radius: 100rpx;

		&-container {
			position: sticky;
			top: calc(var(--status-bar-height) + 98rpx);
			left: 0;
			z-index: 10202;
			background-color: #ffffff;
		}

		&-active {
			color: #FD2E58;
			border-color: #FD2E58;
			background-color: #FFE3E8;
		}
	}
</style>
